<template>
<div>
  <div class="top">
      <h1>猎罪图鉴</h1>
  </div>
 <ul class="videoplay">
    <li> 
    <video width="1200" height="700" controls>
      <source src="../../assets/img/aaa.mp4" type="video/mp4">
    </video>
    </li>
    <li>
<div class="pinglun">
  <div class="comments" >
  <section class="comments-list">
    <ul class="comment" v-for="(com,index) in pinglun" :key="index" style="display:flex; width:100%">
        <li><i class="icon-user icon-3x"></i> <br> <a href="###"><strong>{{com.uname}}</strong></a></li>   
        <li style="width:700%">
            <div class="text">{{com.comword}}</div>
        </li>
        <li>
        <span class="pull-right text-muted">{{com.comtime| date('yyyy-MM-dd hh:mm:ss') }}</span><br>
<!--        <div class="actions"><a href="##">删除</a></div>-->
       </li>
    </ul>
  </section>
  <footer>
    <div class="reply-form" id="commentReplyForm1">
      <a href="###" class="avatar"><i class="icon-user icon-2x"></i></a>
      <form class="form">
        <div class="form-group">
          <textarea id="pinglun" class="form-control new-comment-text" rows="2" placeholder="撰写评论..." v-model="comword"></textarea>
        </div>
        <div class="form-group comment-user">
          <div class="row">
            <div class="col-md-3">
              <el-button type="primary" icon="el-icon-download" @click="submitpl"  size="small" round> 提交 </el-button>
            </div>
          
          </div>
        </div>
      </form>
    </div>
  </footer>
</div>
</div></li>
 </ul>


<hr>
<el-row>
<!--  <el-button type="success" icon="el-icon-download"  @click="down" round
> 下载 </el-button>-->
  <el-button type="success" icon="el-icon-s-opportunity"  @click="star"  round>点赞{{stars}}</el-button>
  <el-button type="success" icon="el-icon-star-on"  @click="collection"  round> 收藏 </el-button>
<!--  <el-button type="success" icon="el-icon-share"  @click="shar"  round>转发</el-button>-->
<!--  <el-button type="danger" icon="el-icon-warning"  @click="jubao"  round> 举报</el-button>-->
</el-row>



</div>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      videos:[
        {"vname": "猎罪图鉴", "vaddr": ""}
      ],
      uid:'',
      vid:'',
      pinglun:[
        {"uname": "不挂科", "comword": "不挂科", "comtime": "2021-05-20 21:13:14"},
        {"uname": "不挂科1", "comword": "不能挂科", "comtime": "2021-05-20 21:13:14"}
      ],
      comword:'',
      stars: 10,
    }
  }
,
methods:{
  down(){
     window.open(this.videos.vaddr, '_blank');
  },
  // coll(){
  //   this.$axios.get('toaddshouchang.do?uid='+this.uid+'&vid='+this.vid).then(response => {
  //       if(response.data>0){
  //         alert("收藏成功");
  //       }else
  //       {
  //         alert("收藏失败")
  //       }
  //     }).catch(function (error) {
  //       console.log(error);
  //     })
  // },
  // 点赞
  star(){
    this.$message({message: '点赞成功', type: "success", duration: 500})
    this.stars += 1
  },
  // 收藏
  collection(){
    this.$message({message: "收藏成功", type: "success", duration: 500})
  },
  shar(){
        this.$axios.get('toaddshare.do?uid='+this.uid+'&vid='+this.vid).then(response => {
        if(response.data>0){
          alert("分享成功");
        }else
        {
          alert("分享失败")
        }
      }).catch(function (error) {
        console.log(error);
      })
  },
  vtp(){
        this.videos.vtp++;
        this.$axios.get('updatevideo.do?vid='+this.vid+'&vtp='+this.videos.vtp).then(response => {
          console.log(response);
      }).catch(function (error) {
        console.log(error);
      })
  },
  jubao(){
        this.$confirm('您将举报此视频, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '举报成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消举报'
          });          
        });
      },
  // submitpl(){
  //        this.$axios.post('addpinglun.do?vid='+this.vid+'&uid='+this.uid+'&comword='+this.comword).then(
  //       response=>{
  //         this.user=response.data;
  //         if(this.user!=null){
  //            alert("添加评论成功")
  //         }else{
  //           alert("添加评论失败")
  //         }
  //       })
  //   }
    submitpl(){
      let pl = document.getElementById("pinglun")
      let username = "不挂科"
      let common = pl.value
      let time = new Date()
      this.pinglun.push({"uname": username, "comword": common, "comtime": time})
    }
},

components:{
},
created() {
      this.vid=this.$route.params.vid;
      this.uid=window.localStorage.getItem('uid')
      console.log(this.vid+this.uid);
      // this.$axios.get('findvideobyid.do?vid='+this.vid).then(response => {
      //   this.videos = response.data;
      //   console.log(this.videos);
      // }).catch(function (error) {
      //   console.log(error);
      // })
      this.$axios.get('findcollbyid.do?vid='+this.vid+'&uid='+this.uid).then(response => {
        this.pinglun = response.data;
        console.log(this.pinglun);
      }).catch(function (error) {
        console.log(error);
      })
    },

}

</script>

<style scoped>
.top{
  text-align: center;
  margin-top: 80px;

}
.videoplay{
display: flex;
list-style: none;
justify-content: center;
}
.videoplay li{
    border: 1px solid #ccc;
    margin: 10px;
    border-radius: 5px;
}
.videoplay li:last-child{
    width: 400px;
}
.pinglun{
    width: 90%;
    margin: 20px auto;
    border: 1px solid #ccc;

}
.comments li{
  list-style: none;
  border: none;
}
.comments{
 
    width: 95%;
    margin: auto;
}
</style>
